<template>
  <div class="app-header flex-row-justify-center">
    <div class="flex-row-start-center">
      <img class="logo" src="https://www.naodong3d.com/prod-api/files/logo.png" alt="脑洞在线3D打印"/>
      <div class="menu-list flex-row-start-center">
        <div
          class="menu-item"
          :class="{
            actived: route.path == item.path
          }"
          v-for="(item, index) in menuList"
          :key="index"
          @click="router.push(item.path)">{{ item.text }}</div>
      </div>
    </div>
    <el-button>登录</el-button>
  </div>
</template>

<script setup lang="ts">
import menus from "~/config/menus"
const menuList = ref(menus)
const route = useRoute()
const router = useRouter()
</script>

<style lang="scss" scoped>
.app-header {
  height: 80px;
  padding: 0 60px;
  background-color: #25313f;
  .logo {
    width: 70px;
    height: auto;
  }
  .menu-list {
    padding: 0 20px;
    .menu-item {
      position: relative;
      padding: 0 30px;
      font-size: 18px;
      line-height: 50px;
      color: #ffffff;
      cursor: pointer;
      &:hover {
        color: $primary;
      }
      &.actived {
        color: $primary;
        &::after {
          content: "";
          position: absolute;
          width: 80px;
          left: 0;
          right: 0;
          bottom: 0;
          margin: 0 auto;
          height: 4px;
          background-color: $primary;
          border-radius: 2px;
        }
      }
    }
  }
}
</style>